<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App" />

    <!-- <el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>

    <el-dialog title="编辑" :visible.sync="dialogFormVisible" width="50%" center="true">

      <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
        <el-form-item prop="tableName" label="标题" :rules="{
          required: true, message: '标题不能为空', trigger: 'blur'
        }">
          <el-input v-model="dynamicValidateForm.tableName" width="80%"></el-input>
        </el-form-item>

        <el-form-item v-for="(fields, index) in dynamicValidateForm.fields" :label="'键值对' + index" :key="fields.kk"
          :prop="'fields.' + index + '.key'" :rules="{
            required: true, message: '域名不能为空', trigger: 'blur'
          }">
          <el-input v-model="fields.key"></el-input>
          <el-input v-model="fields.type"></el-input><el-button @click.prevent="removeDomain(fields)">删除</el-button>

          
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('dynamicValidateForm')">确定</el-button>
          <el-button @click="addDomain">新增</el-button>
          <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
        </el-form-item>
      </el-form>


    </el-dialog> -->

  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'


export default {
  name: 'HomeView',
  components: {
    HelloWorld,
   
  },

  data() {
    return {
      
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',

      },
      
      dialogTableVisible: false,
      dialogFormVisible: false,
      dynamicValidateForm: {
          tableName: "Users",
          fields: [
            {
              key: "id",
              type: "string",
            },
            {
              key: "name",
              type: "string",
            },
            {
              key: "age",
              type: "integer",
            },
          ],
        }
      // formLabelWidth: '120px'
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    removeDomain(item) {
      var index = this.dynamicValidateForm.fields.indexOf(item)
      if (index !== -1) {
        this.dynamicValidateForm.fields.splice(index, 1)
      }
    },
    addDomain() {
      this.dynamicValidateForm.fields.push({
        key: '',
        type: '',
        kk: Date.now()
      });
    }
  }

}
</script>
<style scoped>
 .el-select .el-input {
    width: 130px;
  }
</style>